<template>
    <div :style="styleColor" style="padding:0 5px">
        <!-- 商品数据情况 -->
        <!-- 报关单量及贸易额情况 -->
        <!-- 关税情况 -->
        <div class="header">
            <img class="headerIMG" src="@/assets/images/bigViewIMG2/bluejiantou.png" alt="">
            <span>指标展示</span>
        </div>

        <!-- title -->
        <div v-for="item,index in titleList" :key="item.id">
            <div v-if="index==indexActive"  class="title">{{item.titleName}}</div>
        </div>
      
        <!-- 左右箭头 -->
        <div class="main" v-loading="loading">
            <!-- 左箭头 -->
            <div class="jiantou-left" @click="clickToLeft" v-if="indexActive!==0">
                <img src="./images/switch-jiantou.png" alt="">
            </div>
            <div class="jiantou-right" @click="clickToRight"  v-if="indexActive!==2">
                <img src="./images/tradeModes-title.png" alt="">
            </div>

            <!-- 图表展示 -->
            <!-- <div id="firstMap" ref="firstMap" style="width: 435px; height: 290px;margin:0 auto" v-if="indexActive==0"></div>
            <div id="secondMap" ref="secondMap" style="width: 435px; height: 290px;margin:0 auto" v-if="indexActive==1"></div> -->
            <firstMap v-if="indexActive==0" :changeSelected="changeSelected"></firstMap>
            <secondMap v-if="indexActive==1" :secondList="secondList"  :changeSelected="changeSelected"></secondMap>
            <thirdMap v-if="indexActive==2" :thirdList="thirdList"  :changeSelected="changeSelected"></thirdMap>
        </div>
        <!-- 月 年切换 -->
        <!-- <div class="change">
            
            <div class="changeBtn" @click="changeMouth" :class="changeSelected=='year'?'selected':''">年</div>
            <div class="changeBtn" @click="changeYear" :class="changeSelected=='month'?'selected':''">月</div>
        </div> -->
    </div>
</template>

<script>
    // import echarts from 'echarts'
import firstMap from './components/firstMap.vue'
import secondMap from './components/secondMap.vue'
import thirdMap from './components/thirdMap.vue'
// import { getCommodityInfo } from '@/api/views/index.js'
import { decrypt } from '@/utils/AES.js'
import { reqFindEntryAccessNumByConsign, reqFindEntryAccessNumByConsignQJ } from '@/api/home/index.js'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    components:{
        firstMap,
        secondMap,
        thirdMap

    },
    data(){
        return {
            loading:false,
            // title:'商品数据情况',
            titleList:[
                { id: 0, titleName:'商品数据情况'},
                { id: 1, titleName: '报关单量及贸易额情况' },
                { id: 2, titleName: '关税情况' },
            ],
            indexActive:0,
            changeSelected:'year',
            firstMapList:[],
           
            secondList:[],
            thirdList:[],
          
            options:{}
        }
    },
    computed: {
        transStyle() {
            
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static", 

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    mounted() {
        this.options = this.value
    },
    watch:{
        $route:{
            handler(val){
                if (val.query.reportCode == "SecondView") {
                    // this.getList()
                    this.getSecondList()
                    this.getThirdList()
                }else {
                    return 
                }
               
            },
            deep:true
        }
    },
    created(){
        // this.getList()
        this.getSecondList()
        this.getThirdList()
    },
    methods:{
        // async getList(){
        //     this.loading=true
        //     const res = await reqCommodityData({  consignCode:this.$route.query.tradeCo })
      
        //     console.log(res);
        //     this.firstMapList =res.data
      
        //     this.loading = false
        // },
        async getSecondList(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            const res = await reqFindEntryAccessNumByConsignQJ({ consignCode: query.tradeCo })
            // console.log(res);
            this.secondList=res.data
            // this.secondList2=res1.data
        },
       async getThirdList(){
           let query = JSON.parse(decrypt(this.$route.query.key))
           const res = await reqFindEntryAccessNumByConsign({ consignCode: query.tradeCo })
        //    const res1 = await reqFindEntryAccessNum({consignCode: this.$route.query.tradeCo })

           this.thirdList = res.data
        //    this.thirdList2 = res1.data

        },
        changeYear(){
            this.changeSelected ='month'
            this.getList()
        },
        changeMouth(){
            this.changeSelected = 'year'
            this.getList()
        },
        clickToLeft(){
            if(this.indexActive<1) return
            this.indexActive--
        },
        clickToRight(){
            if (this.indexActive>this.titleList.length-1-1) return
            this.indexActive++
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    // padding: 0 5px;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .headerIMG {
        width: 40px;
        height: 40px;
    }

    span {
        color: #fff;
        margin-left: 10px;
        font-size: 15px;
    }
}
.title {
    position: relative;
    color:#fff;
    text-align: center;
    height: 20px;
    font-size: 16px;
    font-weight: 600;
}
.main {
    height: 294px;
    position: relative;
    ::v-deep .el-loading-mask {
            background-color: rgba(255, 255, 255, 0);
    
    
            .el-loading-spinner .circular {
                width: 30px;
                height: 30px;
            }
    
            .el-loading-spinner .path {
                stroke: #c23531;
                stroke-width: 8px;
            }
        }
        
    .jiantou-left {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translate(0, -50%);
        width: 33px;
        height: 100px;
        // background-color: #54c5ff;
        img{
            position: absolute;
                top: 50%;
                left: 0px;
                transform: translate(0,-50%);
        }
       
    }
    .jiantou-right {
        position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(0, -50%);
            width: 33px;
            height: 100px;
            // background-color: #54c5ff;
    
        img {
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translate(0, -50%);
        }
    }
}
.change {
    position: absolute;
    top: 10px;
    right: 60px;
    color: #fff;
    display: flex;
    .changeBtn {
        width: 40px;
        height: 25px;
        font-size: 14px;
        text-align: center;
        line-height: 24px;
        cursor: pointer;
        margin-left: 5px;
        border-radius: 5px;
            border: 1px solid transparent;
    }
    .selected{
        border-radius: 5px;
        border: 1px solid #26a6ff;
      
    }
}
</style>